import { Link } from "react-router-dom";
import useCartStore from "../../stores/cartStore";

const Cart = () => {
  const { items: cartItems, updateQuantity, removeItem } = useCartStore();
  
  const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const shipping = 0;
  const total = subtotal + shipping;

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">购物车</h1>
      
      {cartItems.length === 0 ? (
        <div className="bg-white rounded-lg shadow-md p-12 text-center">
          <h2 className="text-2xl font-semibold mb-4">您的购物车是空的</h2>
          <p className="text-gray-600 mb-6">赶快去选购您喜欢的商品吧！</p>
          <Link 
            to="/user/products" 
            className="bg-blue-500 text-white font-semibold py-3 px-6 rounded-lg hover:bg-blue-600 transition duration-300"
          >
            继续购物
          </Link>
        </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Cart Items */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-lg shadow-md overflow-hidden">
              {cartItems.map((item) => (
                <div key={item.id} className="border-b last:border-b-0">
                  <div className="p-6 flex flex-col sm:flex-row">
                    <div className="bg-gray-200 w-full sm:w-32 h-32 flex-shrink-0 flex items-center justify-center mb-4 sm:mb-0">
                      <span className="text-gray-500">图片</span>
                    </div>
                    
                    <div className="flex-grow sm:ml-6">
                      <div className="flex justify-between">
                        <div>
                          <h3 className="text-xl font-semibold">{item.name}</h3>
                          <p className="text-gray-600 mt-1">
                            颜色: {item.color} | 材质: {item.material} | 尺寸: {item.size}
                          </p>
                        </div>
                        <button 
                          onClick={() => removeItem(item.id)}
                          className="text-gray-400 hover:text-red-500"
                        >
                          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                      
                      <div className="mt-4 flex flex-col sm:flex-row sm:items-center sm:justify-between">
                        <div className="flex items-center">
                          <span className="mr-2">数量:</span>
                          <div className="flex items-center border rounded">
                            <button 
                              onClick={() => updateQuantity(item.id, item.quantity - 1)}
                              className="px-3 py-1 text-gray-600 hover:bg-gray-100"
                            >
                              -
                            </button>
                            <span className="px-3 py-1">{item.quantity}</span>
                            <button 
                              onClick={() => updateQuantity(item.id, item.quantity + 1)}
                              className="px-3 py-1 text-gray-600 hover:bg-gray-100"
                            >
                              +
                            </button>
                          </div>
                        </div>
                        
                        <div className="mt-2 sm:mt-0">
                          <span className="text-lg font-semibold">¥{item.price * item.quantity}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          
          {/* Order Summary */}
          <div>
            <div className="bg-white rounded-lg shadow-md p-6 sticky top-4">
              <h2 className="text-2xl font-semibold mb-6">订单摘要</h2>
              
              <div className="space-y-4 mb-6">
                <div className="flex justify-between">
                  <span>小计</span>
                  <span>¥{subtotal}</span>
                </div>
                <div className="flex justify-between">
                  <span>运费</span>
                  <span>{shipping === 0 ? "免运费" : `¥${shipping}`}</span>
                </div>
                <div className="border-t pt-4 flex justify-between text-lg font-semibold">
                  <span>总计</span>
                  <span className="text-blue-600">¥{total}</span>
                </div>
              </div>
              
              <Link 
                to="/user/checkout" 
                className="block w-full bg-blue-500 text-white text-center font-semibold py-3 px-6 rounded-lg hover:bg-blue-600 transition duration-300 mb-4"
              >
                去结算
              </Link>
              
              <Link 
                to="/user/products" 
                className="block w-full text-center text-gray-600 hover:text-gray-900"
              >
                继续购物
              </Link>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Cart;